<template>
  <GlobalContainer className="!bg-[#F3F3F3]" :backgroundImage="`${OSS_URL}/images/jiaofei/jiaofei_bg.png`">
    <GlobalHeader title="我的房屋" showBack :fixed="true" :backgroundImage="`${OSS_URL}/images/jiaofei/jiaofei_bg.png`" />
    <div class="mt-12 px-24 pb-140">
      <div class="list-c">
        <div class="item-c mb-20 rounded-20 bg-white" v-for="item in roomList" :key="item.id" @tap="toDetail(item)">
          <div class="border-b-1 border-[#E4E7ED] px-32 pb-10 pt-30">
            <div class="line1 mb-20">
              <div class="flex items-center" @tap.stop="handleSelect(item)">
                <div class="select" :class="{ selected: item.isSelect, cannotSelect: item.status !== 2 }" />
                <div v-if="item.isSelect" class="current">当前</div>
                <div class="title text-30 text-[#303133]">{{ item.communityName }}</div>
              </div>
              <div class="ml-auto">
                <Status :status="item.statusText" />
              </div>
              <image src="../../static/images/baoxiu/right_icon.png" class="ml-16 size-32" />
            </div>
            <div class="line2 text-28 font-normal leading-42 text-[#606266]">
              {{ item.smallAddress || '' }} {{ item.floorName }} {{ item.unitNum + '单元' }} {{ item.roomNum }}
            </div>
          </div>
          <div class="line3 px-32 py-16 text-28 font-normal leading-42 text-[#303133]">{{ item.typeText }}</div>
        </div>
      </div>

      <div class="empty-container mt-18 text-center text-28 leading-36 text-[#909399]" v-if="roomList.length">已加载全部记录</div>
      <div v-else class="empty-container mx-auto mt-240 flex flex-col items-center">
        <div class="empty-img mb-40">
          <image class="h-240 w-330" :src="`${OSS_URL}/images/jiaofei_empty.png`" />
        </div>
        <div class="empty-text text-28 leading-36 text-[#909399]">暂无记录</div>
      </div>
    </div>
    <div class="btn-c px-30 py-20 pb-safe">
      <div class="btn" @tap.stop="handleAddHouse">添加房屋</div>
    </div>
  </GlobalContainer>
</template>

<script setup lang="ts">
import { onShow } from '@dcloudio/uni-app'
import { getUserListPageApi, getBuildingListApi } from '@/common/api/base'
import { updateMemberState } from '@/common/api/member'
import Status from './components/status.vue'
import { useAccountStore } from '@/store/modules/account'
import { userTypeList } from './config'
import { showToast } from '@/utils'
const accountStore = useAccountStore()
const OSS_URL = import.meta.env.VITE_OSS_URL
const roomList = ref<any[]>([])
const handleAddHouse = () => {
  uni.navigateTo({
    url: '/subPages/home/select'
  })
}
const toDetail = (item: any) => {
  uni.navigateTo({
    url: '/subPages/home/detail?roomId=' + item.roomId
  })
}
const handleSelect = (item: any) => {
  if (item.status !== 2) {
    return showToast('该房屋暂未审核通过')
  }
  updateMemberState({
    roomId: item.roomId
  }).then((res: any) => {
    if (res) {
      getRoomList()
    }
  })
}
const getRoomList = () => {
  uni.showLoading({
    title: '加载中',
    mask: true
  })
  getBuildingListApi({})
    .then(async (res: any) => {
      const userInfo = await getUserInfo()
      console.log('[ roomList ] >', roomList)
      roomList.value = res.map((item: any) => {
        return {
          ...item,
          statusText: item.status === 2 ? 'audit' : item.status === 3 ? 'rejected' : 'wait',
          typeText: userTypeList.find((user: any) => user.value === item.type)?.name,
          isSelect: userInfo.roomId === item.roomId
        }
      })
    })
    .finally(() => {
      uni.hideLoading()
    })
}
const getUserInfo = async () => {
  const userInfo = await accountStore.getUserInfoByToken()
  console.log('[ userInfo ] >', userInfo)
  return userInfo
}
onShow(() => {
  getRoomList()
})
</script>

<style scoped lang="scss">
.line1 {
  display: flex;
  align-items: center;
}
.select {
  margin-right: 12rpx;
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  border: 1px solid #d4d7de;
}
.selected {
  border: 8rpx solid #1e90ff;
  background: #1e90ff;
}
.cannotSelect {
  background: #c4c4c4;
  border: 1px solid #d4d7de;
}
.current {
  margin-right: 12rpx;
  background: #fafcff;
  border-radius: 4rpx 4rpx 4rpx 4rpx;
  border: 1px solid #dcdfe6;
  font-weight: 400;
  font-size: 24rpx;
  padding: 0 10rpx;
  line-height: 36rpx;
  color: #909399;
}

.btn-c {
  position: fixed;
  bottom: 12rpx;
  left: 0;
  width: 100%;
  background: #fff;
  z-index: 100;
  .btn {
    height: 94rpx;
    background: #1e90ff;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    text-align: center;
    line-height: 94rpx;
    color: #fff;
    font-size: 32rpx;
  }
}
</style>
